<template>
  <my-card title="帮助信息" >
    <template slot>
      <div class="page-card-body">
        <div class="page-header" v-if="userInfo.role==1||userInfo.role==5">
          <el-button type="primary" @click="hkOpenAdd">新建帮助</el-button>
        </div>
        <div v-if="list.length > 0">
          <div class="sys-box" v-for="(item,index) in list" :key="item.id">
            <div style="position: relative;width: 100%;">
              <div class="sys-title-box">
                <span style="font-weight: bold;">{{index+1+".  " +item.title }}</span>
                <span>
                    <span class="sys-time-box" style="margin-right: 2rem;">{{ formatDate("YYYY-mm-dd HH:MM:SS",new Date(item.createTime)) }}</span>
                    <span v-if="userInfo.role==1||userInfo.role==5"><el-button type="text" style="    color: #134bde;margin-right: 1rem;"
                                                                               @click="del(item)">删除</el-button></span>
                  </span>
              </div>
              <spread class="sys-content-box" :text="item.content"></spread>
            </div>

          </div>
        </div>
        <div v-else>暂无数据</div>
        <div class="pagination-box" v-if="0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30]"
            :page-size="pageParams.count"
            :total="total"
            layout=" prev, pager, next,sizes,jumper"
          >
          </el-pagination>
        </div>
      </div>
    </template>
  </my-card>
</template>

<script>
  import MyCard from "@/components/my-card/index";

  import spread from "@/components/Spread/index";
  import lineHeader from "@/components/line-header/index";
  import {hkGetHelperList} from "@/api/notice";
  import {formatTime} from "@/utils/index";
  import {
    isNull,
    hkShowLoading,
    hkHidLoading,
    hkShowSuccessText,
    hkShowErrorText
  } from "@/utils/tools";
  import {hkDelHelper, hkDelNotice, hkNewNotice} from "../../../api/notice"
  import {mapGetters} from "vuex"
  import {dateFormatCC} from "../../../utils/tools";

  export default {
    components: {
      lineHeader,
      spread,
      MyCard
    },
    props: {},
    data() {
      return {
        formatDate:dateFormatCC,
        total: 0,
        pageParams: {
          page: 1,
          direction: 1,
          count: 100,
          type:1,
        },
        list: []
      };
    },
    watch: {},
    computed: {
      ...mapGetters(["userInfo"]),
    },
    methods: {
      hkGetHelperList() {
        hkShowLoading("加载中...");
        hkGetHelperList(this.pageParams)
          .then(({data}) => {
            hkHidLoading();
            this.total = data.total;
            this.list = data.data
            // this.list = data.data.map(item => {
            //   item.createTime = formatTime(item.createTime);
            //   return item;
            // });
          })
          .catch(err => {
            hkHidLoading();
            hkShowErrorText(err.message);
          });
      },
      handleSizeChange(val) {
        this.pageParams.count = val;
        this.hkGetHelperList();
      },
      handleCurrentChange(val) {
        this.pageParams.page = val;
        this.hkGetHelperList();
      },
      async del(item) {
        let res = await hkDelHelper({id: item.id});

        this.hkGetHelperList();
      },
      hkOpenAdd() {
        this.$router.push("/notice/help/add");
      },
    },
    created() {
    },
    mounted() {
      this.hkGetHelperList();


    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-card{
    min-height: calc(100vh - 14rem);
  }
  .page-card-body {
    .page-header{
      margin-bottom: 1rem;
    }
    .sys-box {
      position: relative;
      border: 1px solid #d0cdcd;
      /*margin: 15px 50px;*/
      /*padding: 15px;*/
      /*border: 1px solid #d5d8da;*/
      /*border-radius: 4px;*/

      display: flex;
      justify-content: space-between;
      align-items: center;

      .sys-title-box {
        position: relative;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #eaeaea;
        color: black;
        padding: 8px;

        .sys-title-left {
          background-color: #e91818;
          height: 6px;
          width: 6px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }

      .sys-content-box {
        margin: 15px 8px;
      }

      .sys-time-box {
        font-size: 12px;
        color: #bbbbbb;
      }
    }
  }
</style>
